import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import MHome from '../views/m/MHome'
import MAbout from '../views/m/MAbout'
import MArticle from '../views/m/MArticle'
import MServe from '../views/m/MServe'
import MShop from '../views/m/MShop'
import MApp from '../MApp'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/About.vue')
  },
  {
    path: '/articles/:id',
    name: 'article',
    component: () => import('../views/ArticleShow')
  },
  {
    path: '/article/create',
    name: 'article-create',
    component: () => import('../views/ArticleCreate')
  },
  {
    path: '/article/:id/edit',
    name: 'article-edit',
    component: () => import('../views/ArticleEdit')
  },
  {
    path: '/m/',
    component: MApp,
    children: [
      {
        path: '/',
        name: 'm-home',
        component: MHome,
      },
      {
        path: 'about',
        name: 'm-about',
        component: MAbout,
      },
      {
        path: 'shop',
        name: 'm-shop',
        component: MShop
      },
      {
        path: 'serve',
        name: 'm-serve',
        component: MServe
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  linkExactActiveClass: 'red-active'
})

export default router
